<template>
  <view class="container">
    <view class="top-bar">
      <uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
    </view>
    <text class="main-title">智能抢修票典票目录</text>

    <view class="section">
      <text class="title">一、低压 </text>
      <view class="subsection">
        <text class="subtitle">(一) 低压带电</text>
        <view class="item">
          <text class="item-title">1. 斗臂车</text>
          <view class="subitem">
            <text class="level-1">(1) 更换下火线</text>
            <text class="level-1">(2) 更换下火线线夹</text>
            <text class="level-1">(3) 下火线电缆绝缘包裹</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">2. 登高</text>
          <view class="subitem">
            <text class="level-1">(1) 更换下火线</text>
            <text class="level-1">(2) 更换下火线及三相表</text>
            <text class="level-1">(3) 更换分线盒及三相表</text>
            <text class="level-1">(4) 更换分线盒</text>
            <text class="level-1">(5) 更换三相表</text>
            <!-- 新增五级目录项，从①开始 -->
            <text class="level-2">① 更换分线盒处三相表(配电工作票)</text>
            <text class="level-2">② 更换分线盒处三相表(低压工作票)</text>
            <text class="level-2">③ 更换下火线处三相表(配电工作票)</text>
            <text class="level-2">④ 更换下火线处三相表(低压工作票)</text>
          </view>
        </view>
      </view>

      <view class="subsection">
        <text class="subtitle">(二) 低压停电场景</text>
        <view class="subitem">
          <text class="level-1">(1) 更换下火线</text>
          <text class="level-1">(2) 更换低压侧户外刀熔</text>
          <text class="level-1">(3) 更换电杆（吊车）</text>
          <text class="level-1">(4) 更换电杆（挖机）</text>
          <text class="level-1">(5) 更换瓷瓶</text>
          <text class="level-1">(6) 树障清理</text>
          <text class="level-1">(7) 导线故障处理（带收线）</text>
          <text class="level-1">(8) 导线故障处理（不带收线）</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="title">二、高压 </text>
      <view class="subsection">
        <text class="subtitle">高压停电场景</text>
        <view class="item">
          <text class="item-title">1. 配变</text>
          <view class="subitem">
            <text class="level-1">(1) 更换配变（停支线，使用吊车）</text>
            <text class="level-1">(2) 更换配变（停台区，使用叉车）</text>
            <text class="level-1">(3) 更换配变（停台区，使用挖机）</text>
            <text class="level-1">(4) 更换配变所属设备（如高低压线夹）</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">2. 集控柜及进出线</text>
          <view class="subitem">
            <text class="level-1">(1) 更换集控柜及进出线（使用叉车）</text>
            <text class="level-1">(2) 更换集控柜及进出线（使用链条葫芦等人力起重）</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">3. 高压电杆</text>
          <view class="subitem">
            <text class="level-1">(1) 更换高压电杆（吊车）</text>
            <text class="level-1">(2) 更换高压电杆（挖机）</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">4. 高压树障</text>
          <view class="subitem">
            <text class="level-1">(1) 高压树障清理</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">5. 高压导线</text>
          <view class="subitem">
            <text class="level-1">(1) 高压导线故障处理（带收线）</text>
            <text class="level-1">(2) 高压导线故障处理（不带收线）</text>
          </view>
        </view>
        <view class="item">
          <text class="item-title">6. 高压瓷瓶</text>
          <view class="subitem">
            <text class="level-1">(1)更换高压瓷瓶</text>
          </view>
        </view>
		<view class="item">
		  <text class="item-title">7. 高压熔断器</text>
		  <view class="subitem">
		    <text class="level-1">(1)更换高压熔断器</text>
		  </view>
		</view>
		<view class="item">
		  <text class="item-title">8. 高压避雷器</text>
		  <view class="subitem">
		    <text class="level-1">(1)更换高压避雷器</text>
		  </view>
		</view>
        <view class="item">
          <text class="item-title">9. 高压母线及总空开</text>
          <view class="subitem">
            <text class="level-1">(1) 更换高压母线及总空开</text>
          </view>
        </view>
		<view class="item">
		  <text class="item-title">10. 高压返出线</text>
		  <view class="subitem">
		    <text class="level-1">(1) 更换返出线</text>
		  </view>
		</view>
      </view>
	  <text class="title">三、空白票单 </text>
	  <view class="subsection">
	    <text class="subtitle">(一) 低压工作票</text>
		<text class="subtitle">(二) 带电作业票</text>
		<text class="subtitle">(三) 事故紧急抢修单</text>
	  </view>	
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据对象可以根据实际需求扩展
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background: linear-gradient(to bottom, #43b2a2, #e2ba97);
  min-height: 100vh;
}

.main-title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  padding-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #fff;
}

.section {
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #1A6937;
  padding-left: 15px;
  border-left: 4px solid #1A6937;
  margin-top: 5px;
}

.subsection {
  margin-left: 25px;
  margin-bottom: 15px;
}

.subtitle {
  font-size: 20px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
  color: #2E8B57;
}

.item-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
  color: #3C7B5E;
  padding: 5px 0;
}

.item {
  margin-top: 8px;
  padding: 5px 0;
}

.subitem {
  margin-left: 20px;
  margin-top: 5px;
}

.level-1 {
  font-size: 16px;
  margin: 8px 0;
  padding-left: 20px;
  color: #333333;
  position: relative;
}

.level-1::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: #1A6937;
  border-radius: 50%;
}

.level-2 {
  font-size: 15px;
  margin: 6px 0 6px 35px;
  color: #666666;
  position: relative;
}

.level-2::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background-color: #2E8B57;
  border-radius: 50%;
}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.top-left {
  font-size: 16px;
  color: #1A6937;
  padding: 0 20px;
}

text {
  display: block;
  line-height: 1.6;
}

/* 添加hover效果 */
.level-1:hover, .level-2:hover {
  background-color: rgba(26, 105, 55, 0.05);
  transition: background-color 0.3s ease;
}
</style>
